<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign Up Login</title>
<link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
  <script src="js/bootstrap.min.js" type="application/javascript"></script>

</head>

<body>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<body>
<div class="cotn_principal">
  <div class="cont_centrar">
    <div class="cont_login">
      <div class="cont_info_log_sign_up">
        <div class="col_md_login">
          <div class="cont_ba_opcitiy">
            <h2>登录</h2>
            <p>请输入你注册的邮箱和密码进行登录</p>
            <button class="btn_login" onclick="cambiar_login()">登录</button>
          </div>
        </div>
        <div class="col_md_sign_up">
          <div class="cont_ba_opcitiy">
            <h2>注册</h2>
            <p>输入你可接受短信的邮箱进行注册</p>
            <button class="btn_sign_up" onclick="cambiar_sign_up()">注册</button>
          </div>
        </div>
      </div>
      <div class="cont_back_info">
        <div class="cont_img_back_grey"> <img src="po.jpg" alt="" /> </div>
      </div>
      <div class="cont_forms" >
        <div class="cont_img_back_"> <img src="po.jpg" alt="" /> </div>
        <div class="cont_form_login"> <a href="#" onclick="ocultar_login_sign_up()" ><i class="material-icons">&#xE5C4;</i></a>
          <h2>登录</h2>

          <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          <input id="loginEmail" type="text" placeholder="邮箱" /><br>

          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
          <input id="loginPass" type="password" placeholder="密码" />

          <button type="button" class="btn_login" id="loginBtn">登录</button>

        </div>
        <div class="container-fluid main" >
          <div class="row">
        <div class="cont_form_sign_up"> <a href="#" onclick="ocultar_login_sign_up()">
          <i class="material-icons">&#xE5C4;</i></a>
          <h2>注册</h2>
          <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          <input type="text" placeholder="请正确输入你的邮箱" id="account_id"/>
          <span id="s_accountId" style="color: red" aria-hidden="true"></span>
          <br>

          <span class="glyphicon glyphicon-user"aria-hidden="true" ></span>
          <input type="text" placeholder="用户昵称" id="name"/>
          <span id="s_name"></span>
          <br>

          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
          <input type="password" placeholder="密码" id="password"/><br>

        <input type="button" id="btn" class="sendEmails" value="免费获取验证码" />

          <input type="text" placeholder="验证码" id="vectiy" />
          <span id="s_vectiy"></span>
          <br>
          <button class="btn_sign_up" id="regists">注册</button>
        </div>
      </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="/js/index.js"></script>
<script type="text/javascript">
  var isSendEmail=false;//默认没有发送邮件并且填写的验证码错误
  var isHasEmial=false;//判断邮箱是否已经使用过
  var isHasName=false;//判断用户名是否已经存在
  var hasVectiy=null;//邮箱的验证码

//登录
  $("#loginBtn").click(function () {
    var loginEmail=$("#loginEmail").val();
    var loginPass=$("#loginPass").val();
    $.post("/loginUser",{"loginEmail":loginEmail,"loginPass":loginPass},function (data) {
        if(data=='faileds'){
          alert("账号或者面膜不正确");
          return false;
        }
        if(data=='succes'){
         // window.location.replace("http://119.3.179.130:8087/");  //对应服务器地址的ip
          window.location.replace("http://localhost:8087/");  //对应服务器地址的ip
        }
    });
  });

  //注册账号
  $("#regists").click(function () {
    var account_id=$("#account_id").val();
    var name=$("#name").val();
    var password=$("#password").val();
    var vectiy=$("#vectiy").val();
    //验证不为空
    if(account_id=="" || name==""||password==""||vectiy==""){
      alert("检查下信息是否为空")
      return  false;
    }

    //验证验吗是不是正确
    if(vectiy!=hasVectiy){
      $("#s_vectiy").addClass("glyphicon glyphicon-remove");
      return  false;
    }else{
      $("#s_vectiy").removeClass("glyphicon glyphicon-remove");
    }

    //发送注册的信息
    $.get("/insertUser",{"account_id":account_id,"name":name,"password":password},function (data) {
     // window.location.replace("http://119.3.179.130:8087/");  //对应服务器地址的ip
      window.location.replace("http://localhost:8087/");  //对应服务器地址的ip
    });


  });
  //验证账号，用户名是否已经存在、
  $(".sendEmails").click(function () {
    //发送邮件的请求
    var account_id=$("#account_id").val();//注册的邮箱
    var name=$("#name").val();
    //验证邮箱
    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    if(account_id==null || name==null){
      alert("邮箱或者用户名不为空才能发送");
      return  false;
    }
    if(!reg.test(account_id))
    {
      $("#s_accountId").addClass("glyphicon glyphicon-remove");
      return false;
    }else{

      $(".sendEmails").val("邮件已经发送，请去查收");
      //判断邮箱是否存在,不存在就返回验证码
      $.get("/sendEmail",{"account_id":account_id,"name":name},function (data) {
          if(data.vectiy=='hasUser'){
            alert("你注册的邮箱或者昵称已经被使用");
            return false;
          }
          hasVectiy=data.vectiy;
          isSendEmail=true;//已经发生过邮件
          console.log(hasVectiy);

      });
      $("#s_accountId").removeClass("glyphicon glyphicon-remove");
      return  false;
    }

  });

</script>
</html>
